<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js第1次实验报告</title>
		<style>
			.container {
				width: 600px;
				text-align: center;
				margin: 0 auto;
				border: dashed 3px darkgray;
				background: linear-gradient(90deg, #4776E6, #8E54E9);
				
				.btn {
					margin-top: 30px;
					margin-bottom: 10px;
				    background: white;
				    color: darkblue;
				    border: none;
				    padding: 15px 25px;
				    font-size: 1.1rem;
				    border-radius: 12px;
				    cursor: pointer;
				    width: 50%;
				    font-weight: 600;
				    letter-spacing: 0.5px;
				    transition: all 0.3s;
				    box-shadow: 0 4px 15px rgba(71, 118, 230, 0.3);
				}
				
				.btn:hover {
				    transform: translateY(-3px);
				    box-shadow: 0 7px 20px rgba(71, 118, 230, 0.4);
				}
				
				.btn:active {
				    transform: translateY(0);
				}
				
				.input-group {
				    margin-bottom: 25px;
				}
				
				label {
				    display: block;
				    margin-bottom: 8px;
				    font-weight: 500;
				    color: #333;
				    font-size: 1.1rem;
				}
				
				input {
				    width: 30%;
				    padding: 15px;
				    border: 2px solid #ddd;
				    border-radius: 12px;
				    font-size: 1.1rem;
				    transition: all 0.3s;
				}
				
				input:focus {
				    border-color: #4776E6;
				    box-shadow: 0 0 0 3px rgba(71, 118, 230, 0.2);
				    outline: none;
				}
				
				input::placeholder {
				    color: #aaa;
				}
			}
		</style>
		<script type="text/javascript">
			function xixi() {
				let yonghuming = document.getElementById("yonghuming");
				let mima = document.getElementById("mima");
				// console.log(yonghuming.value.trim())
				// console.log(mima.value.trim())
				let inputValue = yonghuming.value.trim();
				let inputMiMaValue = mima.value.trim();
				if (inputValue === '' || inputMiMaValue === '') {
					alert("请输入内容后再提交！");
				} else {
					if(inputValue === "admin" && inputMiMaValue === "123456") {
						console.log("登录成功！");
					} else {
						console.log("用户名或密码错误！");
						$('#yonghuming').val('');
						$('#mima').val('');
					}
				}
				
			}
		</script>
	</head>
	<body>
		<div class="container">
<!-- 			<p>用户名：<input type="text" placeholder="请输入用户名" id="yonghuming"/></p>
			<p>密码：<input type="password" placeholder="请输入密码" id="mima"/></p>
			<p><input type="button" value="确定" onclick="xixi();"/></p> -->
			
			
			<div class="input-group">
			    <label for="yonghuming"><i class="fas fa-user"></i> 用户名：</label>
			    <input type="text" placeholder="请输入用户名" name="yonghuming" id="yonghuming">
				
				<label for="mima"><i class="fas fa-user"></i> 密码：</label>
				<input type="text" placeholder="请输入密码" name="mima" id="mima">
			</div>
			
			<button id="submitBtn" class="btn" onclick="xixi();">
			    <i class="fas fa-paper-plane"></i> 确定
			</button>
		</div>
	</body>
</html>